<template>
  <div id="search-com">
    <el-form :inline="true" class="search-form" :model="searchForm" ref="searchForm" size="small">
      <el-form-item v-if="isShowCom.orgCode" class="company">
        <el-cascader
            v-model="searchForm.orgCode"
            :options="orgCodeList"
            :props="{ label: 'orgName', value: 'orgCode', children: 'children', multiple: true, checkStrictly: true }"
            placeholder="请选择公司部门"
            @change="onChangeOrgCode"
            :show-all-levels=false
            collapse-tags
            clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item v-if="isShowCom.companyDate">
        <el-date-picker
            v-model="searchForm.companyDate"
            type="daterange"
            align="right"
            size="small"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="onChangeTime"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
/**
 * min-width: 420px; 最小使用宽度为 420
 */
import dataBoardCommon from '../mixins/dataBoardCommon'

export default {
  name: 'SearchComCompany',
  mixins: [dataBoardCommon],
  data () {
    return {
      orgCodeList: [], // 公司部门 列表
      searchForm: {
        orgCode: '', // 公司部门
        companyDate: [] // 日期
      },
      isShowCom: { // 组件显示
        orgCode: false, // 公司部门
        companyDate: false // 日期
      }
    }
  },
  props: {
    // 使用位置
    type: { // 根据 type 值返回值给父组件判断执行不同方法获取数据，使用方式，不作处理，直接返出当前值
      type: String,
      default: () => ''
    },
    dateArr: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    $route (value) {
      // console.log(value)
    },
    type (value) {
      this.showCom() // 组件显示
    },
    dateArr: { // 日期回显
      handler (value, oldvalue) {
        if (value.length === 0) { return }
        // this.searchForm.companyDate = JSON.parse(JSON.stringify(value))
        this.$set(this.searchForm, 'companyDate', [value[0], value[1]])
      },
      immediate: true
    }
  },
  mounted () {
    this.$nextTick(_ => {
      // console.log(this.dateArr)
    })
  },
  created () {
    this.initializationData() // 初始化数据
    this.showCom() // 组件显示
  },
  methods: {
    // 初始化数据
    initializationData () {
      const matched = this.$route.matched
      this.getOrgTreeList()// 公司部门
      const n = 10
      switch (n) {
        case 1:
          // 执行代码块 1
          console.log(matched[matched.length - 1].meta.title)
          break
        case 2:
          // 执行代码块 2
          console.log(matched[matched.length - 1].meta.title)
          break
        default: // 首页
          // console.log(matched[matched.length - 1].meta.title)
      }
    },
    showCom () { // 组件显示
      const type = this.type
      switch (type) {
        case 'user':
          this.isShowCom.companyDate = true // 日期
          break
        case 'platformProportion':
          this.isShowCom.companyDate = true // 用户运营看板 - 各平台客户来源占比
          break
        case 'userlayerProportion':
          this.isShowCom.companyDate = true // 用户运营看板 - 各等级占比
          break
        case 'bronze' || 'silver' || 'gold':
          this.isShowCom.companyDate = true // 用户运营看板 - 推荐产品偏好 - 铜、银、金
          break
        case 'recommend':
          this.isShowCom.companyDate = true // 用户运营看板 - 推荐产品偏好 - GMV
          break
        case 'renewRankingList':
          this.isShowCom.companyDate = true // 用户运营看板 - 客户拉新排行榜
          break
        case 'company':
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.companyDate = true // 日期
          break
        default:
          this.isShowCom.orgCode = true // 公司部门
          this.isShowCom.companyDate = true // 日期
          // console.log('%c没有类型,默认值！👀', 'color:#fff;font-size:1.2rem;padding:0.8rem 1.6rem;border-radius: 5px;background-color: #3eaf7c;font-family: "Microsoft YaHei",Arial,sans-serif;')
      }
      /*
        this.isShowCom.channe = true // 入栈方式、渠道
        this.isShowCom.orgCode = true // 公司部门
        this.isShowCom.staff = true // 员工
        this.isShowCom.searchBut = true // 按钮
        this.isShowCom.date = true // 日期
      */
    },
    // 获取 入栈方式、渠道
    getChannelList () {
      const params = { pageNo: 1, pageSize: 999 }
      this.$api.selectCustomerditch(params).then((res) => {
        if (res.code == 0) {
          this.channelList = res.data // 入栈方式、渠道
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 公司部门
    getOrgTreeList (params) {
      // orgProcessOrgList
      const orgCodeList = JSON.parse(sessionStorage.getItem('orgCodeList'))
      if (orgCodeList && orgCodeList.length > 0) {
        // console.log(orgCodeList)
        this.orgCodeList = orgCodeList
        // return console.log('SearchComCompany 公司部门 已经有数据，不需要请求！')
        return
      }
      const paramsVersion = { 'request': { 'orgName': '', 'orgType': '' }, 'version': '' }
      this.$api.orgTreeList(paramsVersion).then((res) => {
        this.orgCodeList = res.data
        // 存本地缓存
        sessionStorage.setItem('orgCodeList', JSON.stringify(res.data))
        // id 为 1 的超级管理员不做默认
        const userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
        if (userInfo && userInfo.id !== 1) {
          if (res.data[0].children) {
            // const orgCode = JSON.parse(sessionStorage.getItem('orgCode'))
            this.searchForm.orgCode = [...userInfo.orgCodes]
          } else {
            this.searchForm.orgCode.push(userInfo.orgCode)
          }
          if (this.isFirst > 2) {
            this.fetchData('search')
          }
        }
        this.isFirst++
      }).catch((err) => {
        console.log(err)
      })
    },
    onChangeOrgCode (value) { // 切换公司
      // this.searchForm.orgCode = value[value.length - 1] ?? ''
      // this.searchForm.orgCode = value[value.length - 1] ? value[value.length - 1] : ''
      this.output() // 输出 抛出 内容值
    },
    onChangeTime (value) {
      this.searchForm.diyTime = value
      // console.log(this.searchForm.diyTime)
      this.output() // 输出 抛出 内容值
    },
    output () { // 输出 抛出 内容值
      const obj = {
        searchFormData: Object.assign({}, this.searchForm),
        outputDate: this.currentChooseDate, // 当前选择日期
        type: this.type
      }
      this.$emit('outputSearchData', obj)
    }
  }
}
</script>

<style scoped lang="scss">
#search-com {
  width: 100%;
}

.search-form {
  //display: flex;
  //flex-wrap: wrap;
  float: left;
  //width: calc(100% - 500px);
  width: 100%;
  display: unset;
  flex-wrap: unset;

.el-form-item {
max-width: 212px;
min-width: 212px;
float: left;
/deep/ .el-form-item__label {
  width: 0;
  display: inline-block;
  //background-color: #ff0000;
}

/deep/ .el-form-item__content {
  //background-color: #2D7EDF;
  //width: calc(100% - 70px);

  .el-select, .el-date-editor, .el-cascader {
    width: 100%;
  }
}

.el-button {
  border: none;
  color: #4168E7;
  width: 68px;
  height: 32px;
  background-color: #E3EDFF;
  border-radius: 4px;
}
  &:first-child{
    max-width: 180px;
    min-width: 180px;
  }
  &:last-child{
    margin-right: 0;
  }
//&:last-child{
//  width: 160px;
//  min-width: 160px;
//  /deep/.el-form-item__content{
//    width: 100%!important;
//  }
//}
}

.search-but {
//background-color: #3c763d;
width: 160px;
min-width: 160px;

/deep/ .el-form-item__content {
  width: 100%;
}
}
}

.search-date {
width: 500px;
text-align: right;
float: right;

.el-button {
border: none;
margin-bottom: 10px;
}

.diy-time {
.el-date-editor {
  width: 230px;
}
}
}

@media (min-width: 1500px) {

}

@media (min-width: 1200px) {

}

@media (min-width: 768px) {

}
</style>
